<template>
  <div class="container">
    <h1>
      <span>仿真实验操作</span>
    </h1>
    <div class="imgList clearfix">
      <ul class="mui-table-view mui-grid-view mui-grid-9 clearfix">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon iconfont icon-wenjian1"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤1：文件操作</p>
              <p>三维场景生成</p>
              <p>工作路径设置</p>
              <p>模型的生成...</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-map"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤2：视图导航</p>
              <p>三维地质模型的基础浏览</p>
              <p>放大、缩小、平移...</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon iconfont icon-shezhi"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤3：地层设置</p>
              <p>拔高系数设置</p>
              <p>分层展示</p>
              <p>岩性着色功能</p>
            </div>
          </a>
        </li>
        <li style="margin-right:0;" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon iconfont icon-kongjianchaxun"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤4：空间查询</p>
              <p>钻孔信息查询</p>
              <p>地层岩性查询</p>
              <p>距离量算...</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon iconfont icon-sanwei2"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤5：三维集成</p>
              <p>地表模型</p>
              <p>地层模型</p>
              <p>地裂缝模型...</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon iconfont icon-icon-sanweifenxi"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤6：三维分析</p>
              <p>虚拟钻孔</p>
              <p>地层切剖面功能</p>
              <p>地层切块以及数据漫游...</p>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon iconfont icon-zuankong"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤7：虚拟钻孔生成</p>
              <p>三维虚拟钻孔模型...</p>
            </div>
          </a>
        </li>
        <li style="margin-right:0;" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon iconfont icon-qiekuai"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤8：地层切块分析</p>
              <p>绘制块状切块边界</p>
              <p>块状切块结果分析...</p>
            </div>
          </a>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <span class="mui-icon iconfont icon-liangsuanfenxi"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤9：三维量算</p>
              <p>距离量算</p>
              <p>面积量算...</p>
            </div>
          </a>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <span class="mui-icon iconfont icon-queryretrieval"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤10：岩性查询</p>
              <p>地层岩性信息查询</p>
              <p>钻孔信息查询...</p>
            </div>
          </a>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <span class="mui-icon iconfont icon-panbiefenxi"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤11：地层识读</p>
              <p>断层面识别</p>
              <p>地层结构示意图...</p>
            </div>
          </a>
        </li>
        <li
          style="margin-right:0;margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <span class="mui-icon iconfont icon-baogao"></span>
            <div style="margin-top:12px;">
              <p class="first">实验步骤12：生成实验报告</p>
              <p>生产实验报告</p>
              <p>考评...</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.container {
  padding: 0 150px;
  margin: 40px 0 20px;
  box-sizing: border-box;
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }
  h1 {
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    position: relative;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
  }
  .imgList {
    ul {
      margin: 30px 0 0 0;
      padding: 0;
      li {
        width: 230px;
        height: 295px;
        list-style: none;
        background: rgba(239, 239, 239,0.1);
        box-shadow: 0 0 5px #ccc;
        float: left;
        margin-right: 92px;
        margin-bottom: 60px;
        a {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          div {
            .first {
              color: #333;
            }
            p {
              margin: 5px 0 0 10px;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
      li:hover {
        background-color: #2fb7a1;
      }
      li:hover a {
        color: #fff;
        border: 1px solid #fff;
      }
      li:hover a p {
        color: #fff;
      }
    }
    .mui-grid-view.mui-grid-9 {
      border: none;
      background-color: #fff;
    }
    .mui-grid-view.mui-grid-9 .mui-media .mui-icon {
      font-size: 4.4em;
      top: 40px;
    }
  }
}
</style>